<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>别敲白块</title>
    <style>
        * {
            padding: 0 0;
            margin: 0 0;
        }
        div{
            background-color: aqua;
            width: 500px;
            height: 600px;
            margin: 0 auto;
            margin-top: 50px;
        }

        div #timer{
            width: 100px;
            height: 50px;
            float: left;
            margin-top: 20px;
            margin-left: 20px;
        }

        p{
            font-size: 50px;
            margin-left: 150px;
        }

        div #count{
            width: 100px;
            height: 40px;
            float: right;
            margin-top: 20px;
            margin-right: 10px;
        }

        div #biaoge{
            width: 300px;
            height: 400px;
            /* background-color: #000; */
            margin: 0 auto;
        }

        tr{
            width: 100px;
            height: 100px;
            background-color: #fff;
        }
        #kuangjia{
            width: 300px;
            height: 400px;
            /* overflow: hidden; */
        }
    </style>
</head>
<body>
    <div>
        <div id="timer">00:00:00</div>
        <div id="count">0</div>
        <p>别敲白块</p>
        <div id="kuangjia">
            <table id="biaoge">
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td id="a"></td>
                </tr>
            </table>
        </div>
    </div>
</body>
<script>
    //用来输出分数
    var score = 0;
    var sco=document.getElementById('count');
    //用来控制时间
    var time = document.getElementById('timer');
    //创建新的一行
    newhang=document.createElement('tr');
    //获取表格的第一行
    var tab = document.getElementsByTagName('table')[0];
    //用来控制移动
    var btn= 1;
    //时分秒
    var mis = 0;
    var sec = 0;
    var min = 0;
    //统计分数
    var int;
    //设置初始状态
    var bool=true;
    //获取行
    //insertCell 通过父级元素递归找到其所有的子元素
    var hang = document.getElementsByTagName("tr");
    //改变每行随机列的颜色
    //Math.ceil 返回大于或等于一个给定数字的最小整数
    //Math.random 返回一个浮点数 从 0-1 包括0 但不包括1
    // children 子孩子
    hang[0].children[Math.ceil(Math.random()*3)-1].style.background='black';
    hang[1].children[Math.ceil(Math.random()*3)-1].style.background='black';
    hang[2].children[Math.ceil(Math.random()*3)-1].style.background='black';
    hang[3].children[Math.ceil(Math.random()*3)-1].style.background='black';

    //键盘按下事件
    onkeydown=function(event){
        if(bool==true){
            //设置下移速度
            int=setInterval(times,10);
            //结束执行
            bool=false;
        }
        window.onclick=function(){
            switch(event.key){
            case 'j':
                if(hang[3].children[0].style.background=='black'){
                    speed();
                    scores();
                }else{
                    over();
                    begin()
                }
                break;
            case 'k':
                if(hang[3].children[1].style.background=='black'){
                    speed();
                    scores();
                }else{
                    over();
                    begin()
                }
                break;
            case 'l':
                if(hang[3].children[2].style.background=='black'){
                    speed();
                    scores();
                }else{
                    over();
                    begin()
                }
                break;
        }
        }()
        //通过键值来实现动态效果
        // switch(event.key){
        //     case 'j':
        //         if(hang[3].children[0].style.background=='black'){
        //             speed();
        //             scores();
        //         }else{
        //             over();
        //             begin()
        //         }
        //         break;
        //     case 'k':
        //         if(hang[3].children[1].style.background=='black'){
        //             speed();
        //             scores();
        //         }else{
        //             over();
        //             begin()
        //         }
        //         break;
        //     case 'l':
        //         if(hang[3].children[2].style.background=='black'){
        //             speed();
        //             scores();
        //         }else{
        //             over();
        //             begin()
        //         }
        //         break;
        // }
        }

    //新增行
    function adds(){
        //新建一行
        biaoge.insertRow(0);
        for (var i =0;i<3;i++){
            //新增td 三次
            hang[0].insertCell();
        }
        //改变新增行中 随机列的颜色
        hang[0].children[Math.ceil(Math.random()*3)-1].style.background='black';
    }

    //向下移动
    function speedup(){
        if(btn%100!=0){
            biaoge.style.bottom=-btn-1+'px';
            btn++;
            setTimeout(speedup,10);
        }else{
            clearTimeout(speedup);
            btn++;
        }
        
    }
    //向下移动
    function speed(){
        //添加一行
        adds();
        //向下移动
        speedup();
        hang[4].style.opacity=0;
        // hang[4].style.width=0
        // hang[4].style.height=0;
        // hang[4].style.margin=0;
        // hang[4].style.padding=0;
    }

    // 统计分数
    function scores(){
        score+=1;
        sco.innerHTML=score;
    }

    // 游戏结束
    function over(){
        alert('游戏结束,得分：'+score+';用时'+time.innerHTML);
        clearInterval(int);
        //重置各个值
        mis = 0;
        sec = 0;
        min = 0;
        score=0;
        sco.innerHTML=score;
        bool=true;
    }

    //统计时间
    function begin(){
        time.innerHTML = (min < 10 ? "0" + min :min) + ":" +(sec < 10 ? "0" + sec :sec) + ":" + (mis < 10 ? "0" + mis :mis);
    }

    //计时器
    function times(){
        mis++;
        if(mis>59){
            mis=0;
            sec++;
        }
        if(sec>59){
            sec=0;
            min++;
        }
        if(min>59){
            min=0;
        }
        begin();
    }
    
</script>
</html>